import React, { useContext, useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  TextInput,
  ScrollView,
  Alert,
} from "react-native";
import CitySelector from "../../components/preAdmin/CitySelector";
import SampleVillageContext from "../../context/preparation/SampleVillageContext";
import LoadingBar from "../../components/InterView/LoadingBar";

const SampleVillageAdd = ({ navigation }) => {
  const { addSampleVillage, isVillageLoading } =
    useContext(SampleVillageContext);

  const [provinceKey, setProvinceKey] = useState("");
  const [cityKey, setCityKey] = useState("");
  const [areaKey, setAreaKey] = useState("");

  const [date, setDate] = useState("");
  const [province, setProvince] = useState("");
  const [city, setCity] = useState("");
  const [area, setArea] = useState("");
  const [street, setStreet] = useState("");
  const [village, setVillage] = useState("");
  const [property, setProperty] = useState(""); //村属性
  const [researchType, setResearchType] = useState(""); //调查方式

  const handleProvince = (key, province) => {
    setProvinceKey(key);
    setProvince(province);
  };

  const handleCity = (key, city) => {
    setCityKey(key);
    setCity(city);
  };

  const handleArea = (key, area) => {
    setAreaKey(key);
    setArea(area);
  };

  const onConfirm = () => {
    Alert.alert("提示", "确定要提交吗?", [
      {
        text: "取消",
        style: "cancel",
      },
      {
        text: "确定",
        onPress: async () => {
          let item = {
            date: date,
            province: province,
            provinceKey: provinceKey,
            city: city,
            cityKey: cityKey,
            area: area,
            areaKey: areaKey,
            street: street,
            village: village,
            property: property,
            researchType: researchType,
            type: "unpublish",
          };
          addSampleVillage(item, () => {
            navigation.navigate("SampleVillageManage");
          });
        },
      },
    ]);
  };

  return (
    <View style={styles.container}>
      <LoadingBar visible={isVillageLoading} />
      <ScrollView>
        <View style={styles.card}>
          <View style={styles.option}>
            <Text style={{ fontSize: 16 }}>日期:</Text>
            <TextInput
              style={[styles.inputBox]}
              multiline={true}
              value={date}
              placeholder="请输入日期(参考形式10-19上午)"
              onChangeText={(text) => {
                setDate(text);
              }}
            />
          </View>

          <CitySelector
            provincekey={provinceKey}
            citykey={cityKey}
            areakey={areaKey}
            handleProvince={(provinceKey, province) => {
              handleProvince(provinceKey, province);
            }}
            handleCity={(cityKey, city) => {
              handleCity(cityKey, city);
            }}
            handleArea={(areaKey, area) => {
              handleArea(areaKey, area);
            }}
          />
          <View style={styles.option}>
            <Text style={{ fontSize: 16 }}>乡镇:</Text>
            <TextInput
              style={[styles.inputBox, { marginTop: -10 }]}
              multiline={true}
              value={street}
              placeholder="请输入乡镇"
              onChangeText={(text) => {
                setStreet(text);
              }}
            />
          </View>

          <View style={styles.option}>
            <Text style={{ fontSize: 16 }}>村庄:</Text>
            <TextInput
              style={styles.inputBox}
              multiline={true}
              value={village}
              placeholder="请输入村"
              onChangeText={(text) => {
                setVillage(text);
              }}
            />
          </View>

          <View style={styles.option}>
            <Text style={{ fontSize: 16 }}>村属性:</Text>
            <TextInput
              style={[styles.inputLine, { marginLeft: 30 }]}
              multiline={true}
              value={property}
              placeholder="请输入村属性"
              onChangeText={(text) => {
                setProperty(text);
              }}
            />
          </View>

          <View style={styles.option}>
            <Text style={{ fontSize: 16 }}>调查方式:</Text>
            <TextInput
              style={styles.inputLine}
              multiline={true}
              value={researchType}
              placeholder="请输入调查方式"
              onChangeText={(text) => {
                setResearchType(text);
              }}
            />
          </View>
        </View>
        <View style={styles.btnBox}>
          <TouchableOpacity
            style={styles.backBtn}
            onPress={() => navigation.goBack()}
          >
            <Text style={{ color: "#41C3EE", fontSize: 16 }}>取消</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.submitBtn}
            onPress={() => onConfirm()}
          >
            <Text style={{ color: "#fff", fontSize: 16 }}>确认</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </View>
  );
};

var styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    flex: 1,
  },
  card: {
    backgroundColor: "#fff",
    padding: 10,
    margin: 16,
  },
  inputBox: {
    borderColor: "#CCC",
    borderWidth: 0.5,

    borderRadius: 2,
    padding: 10,
    // marginHorizontal: 10,
    marginLeft: 10,
    flex: 1,
  },
  option: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginTop: 10,
  },
  btnBox: {
    flexDirection: "row",
    justifyContent: "space-between",
    padding: 16,
    paddingTop: 5,
    // marginTop: 16,
  },
  backBtn: {
    borderWidth: 1,
    borderColor: "#41C3EE",
    alignItems: "center",
    padding: 10,
    borderRadius: 5,
    flex: 1,
    marginRight: 20,
    // width: 100,
  },
  submitBtn: {
    backgroundColor: "#41C3EE",
    alignItems: "center",
    padding: 10,
    borderRadius: 5,
    flex: 2,
    // width: 200,
  },
  inputLine: {
    borderBottomColor: "#ddd",
    borderBottomWidth: 1,
    flex: 1,
    padding: 10,
    marginLeft: 10,
  },
});

export default SampleVillageAdd;
